<template>
  <div class="nav-wrap">
    <div class="nav-item" style="background: #9B7A46;margin-top:0;">
      <p class="text">logo</p>
    </div>
    <div class="nav-item">
      <router-link :class="{active : $route.path==='/index/yuqi'}" :to="{name:'YuQi'}">玉器</router-link>
    </div>
    <div class="nav-item">
      <router-link :class="{active : $route.path==='/index/tongqi'}" :to="{name:'TongQi'}">铜器</router-link>
    </div>
    <div class="nav-item">
      <router-link :class="{active : $route.path==='/index/jinyin'}" :to="{name:'JinYin'}">金银器</router-link>
    </div>
    <div class="nav-item">
      <router-link :class="{active : $route.path==='/index/taoci'}" :to="{name:'TaoCi'}">陶瓷器</router-link>
    </div>
    <div class="nav-item">
      <router-link :class="{active : $route.path==='/index/qimu'}" :to="{name:'QiMu'}">漆木器</router-link>
    </div>
    <div class="nav-item">
      <router-link :class="{active : $route.path==='/index/zaqi'}" :to="{name:'ZaQi'}">杂器</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navgation",
  data() {
    return {
      navList: [
        { name: "玉器", path: "/index/yuqi" },
        { name: "铜器", path: "tongqi" },
        { name: "金银器", path: "jinyin" },
        { name: "陶瓷器", path: "taoci" },
        { name: "漆木器", path: "qimu" },
        { name: "杂器", path: "zaqi" }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
@import "../../static/styles/mixin.scss";
.nav-wrap {
  width: 100%;
  background: #b89d67;
  .text {
    @include sc(0.3rem, #fff);
    line-height: 0.8rem;
    padding-left: 10%;
  }

  .nav-item {
    height: 0.9rem;
    margin-top: 0.1rem;
    cursor: pointer;
    .active {
      background: #000000;
    }

    a {
      display: block;
      line-height: 0.9rem;
      @include sc(0.3rem, #fff);
      padding-left: 10%;
      &:hover {
        background: #000000;
      }
    }
  }
}
</style>